<html>
<head>
    <title>物流快递 - 后台</title>
    <link href="/static/css/semantic.css" rel="stylesheet"/>
    <style>
body{font-family: "Microsoft YaHei" !important;}
.ui.menu .item img.logo {
    margin-right: 1.5em;
}
.main.container {
    margin-top: 7em;
}
.wireframe {
    margin-top: 2em;
}
.ui.footer.segment {
    margin: 5em 0em 0em;
    padding: 5em 0em;
}
    </style>
</head>
<body>
<div class="ui fixed inverted menu">
    <div class="ui container" >
        <a href="#" class="header item">
            欢迎使用物流管理系统
        </a>
        <a href="/users" class="item">员工管理</a>
        <a href="/region" class="item">地区管理</a>
        <a href="/sites" class="item">站点管理</a>
        <a href="/waybill" class="item">货单管理</a>
        <a href="/login" class="item">退出</a>

    </div>
</div>

<div class="ui main text container"style="
    max-width: 900px!important;
">
    <table class="ui celled striped table">
        <thead>
        <tr><th colspan="4">区域管理
            <button class="button ui primary" onclick="$('.ui.modal').modal('show');id:$('#id').val('');">添加</button>
        </th>
        </tr></thead>
        <tbody>

        <#list list as i>
        <tr>
            <td class="collapsing"> ID:${i.id} </td>
            <td>${i.name}</td>
            <td>${i.desc!''}
            </td>
            <td class="right aligned collapsing">
                <button class="button ui orange" onclick="mod('${i.id}','${i.name}','${i.desc}')">修改</button>

                <button class="button ui red" onclick="del('${i.id}')">删除</button>
            </td>
        </tr>
        </#list>
        </tbody>
    </table></div>
<div class="ui modal" style="width: 300px; padding: 15px;margin-left: -200px">
    <form class="ui form five" method="post">
        <input type="hidden" id="id" value=""/>
        <div class="field">
            <input type="text" id="name" placeholder="名称">
        </div>
        <div class="field">
            <input type="text" id="desc" placeholder="描述">
        </div>
        <button class="ui button primary" type="button" onclick="add()">提交</button>
        <button class="ui button" type="button" onclick="$('.ui.modal').modal('hide');">取消</button>
    </form>
</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/semantic.min.js"></script>
<script type="text/javascript">
    function add() {
        $.post('/region/add',{
            id:$('#id').val(),
            name:$('#name').val(),
            desc: $('#desc').val(),
        },function (data) {
            alert('操作成功');
            location.reload();
        })
    }
    function mod(id,name,desc) {
        $('#id').val(id);
        $('#name').val(name);
        $('#desc').val(desc);
        $('.ui.modal').modal('show');
    }
    function del(id) {
        $.post('/region/delete/'+id,function (data) {
            alert('删除成功');
            location.reload();
        })
    }
</script></body>
</html>